<template>
  <div class="fallCard flex items-center pl-22px" @click="hand">
    <div @click.stop="close" class="close_main">
      <div class="close flex items-center justify-center">
        <img
          :src="require('@/assets/business/icon_close.png')"
          alt=""
          class="w-12px h-12px"
        />
      </div>
    </div>

    <div class="center flex items-center">
      <div class="info flex items-center justify-center mr-8px">
        <img :src="require('@/assets/icon/c_info2.png')" />
      </div>
      <div class="text">
        <p class="p1">你有{{ fallingNum }}个即将掉落的商机</p>
        <p class="p2">每天早上8点商机掉落</p>
      </div>
    </div>
    <img
      :src="require('@/assets/business/img_gsh_jt.png')"
      alt=""
      height="14px"
      width="14px"
      class="Details"
    />
  </div>
</template>

<script>
import Bus from "@/config/evenrBus";
export default {
  props: {
    fallingNum: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return {
      showCard: true,
    };
  },
  methods: {
    close() {
      this.$emit("closeCard");
    },
    open() {
      this.showCard = true;
    },
    hand() {
      this.$router.push({ name: "dropBusiness" });
      Bus.$emit("updatefalling");
    },
  },
  destroyed() {
    Bus.$off("updatefalling");
  },
};
</script>

<style lang="scss" scoped>
.fallCard {
  width: 355px;
  height: 55px;
  background: #1d6fe9;
  box-shadow: 0px 0px 10px 0px #aeceff;
  border-radius: 10px;
  margin: 10px auto;
  position: relative;
  animation: animationline;
  animation-duration: 1s;
  animation-timing-function: ease;
  .close_main {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    text-align: left;
  }
  .close {
    background-image: url(@/assets/business/img_gsh_bj.png);
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background-size: 100% 100%;
  }
  .center {
    .info {
      width: 28px;
      height: 28px;
      background: #6aa0f0;
      border-radius: 50%;
      line-height: 28px;
      text-align: center;
      img {
        width: 20px;
        height: 20px;
      }
    }
    .text {
      font-family: PingFangSC-Medium, PingFang SC;
      color: #ffffff;
      .p1 {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
        margin-bottom: 2px;
      }
      .p2 {
        font-size: 12px;
        color: #8cb6f3;
        font-weight: 400;
        margin: 0;
      }
    }
  }
  .Details {
    position: absolute;
    right: 11px;
  }
}
</style>
